<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>WEB GL</title>
  </head>
  <body>
    <canvas width="300" height="300"></canvas>
    <script>
      function getPolygonPoints(n, r) {
        const stepAngle = (2 * Math.PI) / n;
        let initAngle = 0;
        const pointArray = [];
        for (let i = 0; i < n; i++) {
          // 存储x坐标
          pointArray.push(r * Math.cos(initAngle));
          // 存储y坐标
          pointArray.push(r * Math.sin(initAngle));

          initAngle += stepAngle;
        }

        return pointArray;
      }

      // 1. 创建 WebGL 上下文
      const canvas = document.querySelector("canvas");
      const gl = canvas.getContext("webgl");

      // 2. 创建 WebGL 程序（WebGL Program）
      // 顶点着色器
      const vertex = `
                  attribute vec2 position;
                  varying vec3 color;

                  void main(){
                      gl_PointSize = 1.0;
                      color = vec3(0.5 + position * 0.5, 0.0);
                      gl_Position = vec4(position * 0.5, 1.0, 1.0);
                  }
              `;
      const vertexShader = gl.createShader(gl.VERTEX_SHADER);
      gl.shaderSource(vertexShader, vertex);
      gl.compileShader(vertexShader);

      // 片元着色器
      const fragment = `
                  precision mediump float;
                  varying vec3 color;

                  void main(){
                      gl_FragColor = vec4(color, 1.0);
                  }
              `;
      const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
      gl.shaderSource(fragmentShader, fragment);
      gl.compileShader(fragmentShader);

      // 将shader对象链接到program对象中
      const program = gl.createProgram();
      gl.attachShader(program, vertexShader);
      gl.attachShader(program, fragmentShader);
      gl.linkProgram(program);

      gl.useProgram(program);

      const pointsArray =  getPolygonPoints(20, 1); // [-1, 1, 1, 1, 1, -1, -1, -1];
      console.log(pointsArray);
      const points = new Float32Array(pointsArray);

      const bufferId = gl.createBuffer();
      gl.bindBuffer(gl.ARRAY_BUFFER, bufferId);
      gl.bufferData(gl.ARRAY_BUFFER, points, gl.STATIC_DRAW);

      // 将缓冲区数据读取到 GPU
      const vPosition = gl.getAttribLocation(program, "position"); //获取顶点着色器中的position变量的地址
      gl.vertexAttribPointer(vPosition, 2, gl.FLOAT, false, 0, 0); //给变量设置长度和类型
      gl.enableVertexAttribArray(vPosition); //激活这个变量

      // 步骤五：执行着色器程序完成绘制
      gl.clear(gl.COLOR_BUFFER_BIT);
      gl.drawArrays(gl.TRIANGLE_FAN, 0, points.length / 2);
    </script>
  </body>
</html>
